<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<link rel="stylesheet" type="text/css" href="./Public/Home/css/product.css"/>
<script type="text/javascript" src="Public/uploadify/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./Public/Home/js/style.js"></script>
<script type="text/javascript">
	$(function(){
		$('.goods_min_w li a').click(function(){
			$(this).addClass('gwm_hover').siblings().removeClass('gwm_hover');
			//span的个数,也就是多少种属性
			var spanLen = $('.goods_min_w span').length;
			//选中的元素的个数
			var aLen = $('.gwm_hover').length;
			if(aLen == spanLen){
				//得到所有选中的商品属性id,然后发异步到货品列表查询,最后获得结果
				var str = '';
				$.each($('.gwm_hover'), function() {
					str += $(this).attr('aId') + ',';
				})
				
//				$('.num_min').click(function(){	
//				//抓取购买商品数量
				var goodsNum = $('.goods_inputnum').val();
				//发异步
				$.ajax({
					type:"post",
					url:"{{U('Product/getAttr')}}",
			        data:{str:str,gn:goodsNum},
					dataType:'json',
//					async : false,//设置为同步操作就可以给全局变量赋值成功 
					//服务器返回数据				
					success:function(phpData){
						console.log(phpData);
						//库存
						var inventory = '';
						//总价格
						var price = '';
						//立省价格
						var discount = '';
						//折扣
						var sale = '';
						//货号
						var lnumber = '';
						if(phpData){
							//库存
							inventory += '库存'+'<span class="invenNum">'+phpData.inventory+'</span>'+'<span class="invenHtml">'+'件'+'</span>';	
							//计算总价格(保留两位小数)
							price += ({{$goodsData[0]['mallPrice']}}+phpData.price).toFixed(2);
							//立省价格
							discount += {{$goodsData[0]['marketPrice']}}-price;	
							//折扣
							sale +=	'（'+(({{$goodsData[0]['mallPrice']}}/price)*10).toFixed(1)+'折）';
							//货号
							lnumber += '货 &nbsp; 号： '+phpData.lnumber;						
						}else{
							inventory += '<span style="color:red">'+'*暂无此商品*'+'</span>';
							price += ({{$goodsData[0]['mallPrice']}}).toFixed(2);	
							discount += {{$goodsData[0]['marketPrice']-$goodsData[0]['mallPrice']}};
							sale += '（'+{{round($goodsData[0]['mallPrice']/$goodsData[0]['marketPrice']*10,1)}}+'折）';
							lnumber += ' 暂无此商品';	
						}
						$('.inventory').html(inventory);
						$('.mallPrice').html(price);
						$('.discount').html(discount);
						$('.sale').html(sale);						
						$('.lnumber').html(lnumber);										
					}						
				});	
//				});				
			}
		});
		
		//购买商品数量		
		$(".increase").click(function(){
			//抓取库存数量
			var invenNum = $('.inventory .invenNum').html();
			//只有先选规格才能选购买商品数量
			if(invenNum){
				var n = $(this).prev().val();
				var num = parseInt(n)+1;
				//购买数量必须少于等于库存数量
				if(num > invenNum){alert('库存不足！');return;}
				if(num == 0){ return;}
				$(this).prev().val(num);
			}else{
				alert('请选则商品规格');
			}																
		})
		$(".decrease").click(function(){
			//抓取库存数量
			var invenNum = $('.inventory .invenNum').html();
			//只有先选规格才能选购买商品数量
			if(invenNum){
				var n = $(this).next().val();
				var num = parseInt(n)-1;
				if(num == 0){alert('最少购买一件商品哦');return;}
				$(this).next().val(num);
			}else{
				alert('请选则商品规格');
			}										
		});	
				
		//点击加入购物车触发异步		
		$('.btn_car').click(function(){
			//span的个数,也就是多少种属性
			var spanLen = $('.goods_min_w span').length;
			//选中的元素的个数
			var aLen = $('.gwm_hover').length;
			if(aLen == spanLen){
				//得到所有选中的商品属性id,然后发异步到货品列表查询,最后获得结果
				var str = '';
				$.each($('.gwm_hover'), function() {
					str += $(this).attr('aId') + ',';
				})
				//抓取购买商品数量
				var goodsNum = $('.goods_inputnum').val();	
				//抓取商品库存
				var invenNum = $('.inventory .invenNum').html();
				//若没有库存，则不能添加购物车		
				if(invenNum){
					//发异步
					$.ajax({
						type:"post",
						url:"{{U('ShopCar/add')}}",
				        data:{str:str,gn:goodsNum,gid:{{$_GET['gid']}}},
						dataType:'json',
						//服务器返回数据				
						success:function(phpData){
							console.log(phpData);
							//购物车商品总数	
							$('#a').html(phpData.num);	
							$('.span_auto_content b').html(phpData.num);								
							$('.span_auto_content .totleMoney').html((phpData.goodsprice).toFixed(2));																														
						}						
					});		
				}else{
					alert('您所选的规格暂无此商品库存，请选择其他规格属性商品！');
				}											
			}
			else{
				alert('请先选择商品规格')
			}	
		});	
		
		//添加购物车成功弹出信息
		$(".btn_car").click(function(){ 
			var invenNum = $('.inventory .invenNum').html();
			//若商品有库存，则添加成功
			if(invenNum){
				$("#btn_car_cover").fadeIn(1000);
				$("#cover").css({display:"block"})
			}				
   		});
    	$(".dialog_close_btn").click(function(){ 
			$("#btn_car_cover").fadeOut(300);
			$("#cover").css({display:"none"})
   		});		
   		
		//点击直接购买触发异步		
		$('.btn_buy').click(function(){			
			//span的个数,也就是多少种属性
			var spanLen = $('.goods_min_w span').length;
			//选中的元素的个数
			var aLen = $('.gwm_hover').length;
			if(aLen == spanLen){
				//得到所有选中的商品属性id,然后发异步到货品列表查询,最后获得结果
				var str = '';
				$.each($('.gwm_hover'), function() {
					str += $(this).attr('aId') + ',';
				})
				//抓取购买商品数量
				var goodsNum = $('.goods_inputnum').val();	
				//抓取商品库存
				var invenNum = $('.inventory .invenNum').html();
				//若没有库存，则不能添加购物车		
				if(invenNum){
					//发异步
					$.ajax({
						type:"post",
						url:"{{U('Product/buy')}}",
				        data:{str:str,gn:goodsNum,gid:{{$_GET['gid']}}},
						dataType:'json',
						//服务器返回数据				
						success:function(phpData){
							console.log(phpData);
							//若有符合该商品规格，则跳转下订单页面
							if(phpData){																					
								location.href="{{U('FillInfo/index',['cid'=>$_GET['cid']])}}";
							}
						}						
					});		
				}else{
					alert('您所选的规格暂无此商品库存，请选择其他规格属性商品！');
				}											
			}
			else{
				alert('请先选择商品规格')
			}	
		});			   
	})	
</script>
</head>
<body>	
<div id="cover"></div>	
	<!--载入公共模板-->
	{{include file="../Common/header"}}

<!--current information-->
<div class="now_loc">
	您当前的位置：  
		<a href="">名鞋库</a>
		{{foreach from="$nowname" key="$k" value="$v"}}
			<span> » </span>
			<a href="">{{$v}}</a>
		{{endforeach}}
</div>
<!--end current information-->
	
<!--Product Details-->		
<nav id="P_details">
	<div class="goods_picture">	
		<ul class="goods__pic_max">
			{{foreach from="$goodsData[0]['picture']" value="$v"}}
				<li class="pic_x"><img src="{{$v}}"/></li>
			{{endforeach}}
		</ul>
		<ul class="goods__pic_min">
			<!--原图的缩略图 	width:45px;heigth:45px-->
			{{foreach from="$goodsData[0]['picture']" value="$v"}}			
			<li class="pic_n"><a href="javascript:;"><img src="{{$v}}" alt="" /></a></li>
			{{endforeach}}
			
		</ul>
	</div>
	<!--商品信息-->
	<div class="goods_info">
		<div class="goods_info_title">
			<!--商品名称-->
			<h1>{{$goodsData[0]['gname']}}</h1>
		</div>
		<ul class="goods_price">
			<li>
			吊  牌  价：
			<del>￥{{$goodsData[0]['marketPrice']}}</del>
			</li>
			<li>
			销  售  价：
			<span>￥</span><span class="mallPrice">{{$goodsData[0]['mallPrice']}}</span>
			<!--打折-->
			<span class="sale">（{{round($goodsData[0]['mallPrice']/$goodsData[0]['marketPrice']*10,1)}}折）</span>		
			&nbsp;&nbsp;立省：<span id="price">￥</span><span class="discount ">{{$goodsData[0]['marketPrice']-$goodsData[0]['mallPrice']}}</span>
			</li>
			<li>
			<!--好  评  度：  
			<i></i>
			<a class="comCount" href="">已有3人评论</a>-->
			</li>
			<li>
			运     &nbsp;   费： 
			普通快递
			</li>
			<!--货号-->
			<li class="lnumber">
			</li>			
		</ul>
		<div class="goods_size">
			
			{{foreach from="$sameType" value="$v"}}
			<ul class="goods_min_w">
				<span>{{$v['name']}}:</span>
				<li>	
				{{foreach from="$v['value']" value="$vv"}}
					<a href="javascript:;" aId="{{$vv['gaid']}}">{{$vv['gvalue']}}<i></i></a>		
				{{endforeach}}
				</li>
			</ul>
			{{endforeach}}
			
			<div class="goods_num">
				<span>购买数量:</span>
				<span class="num_min decrease"></span>
				<input class="goods_inputnum" type="text" value="1"/>
				<span class="num_min increase"></span>	
				<span class="inventory"></span>									
			</div>
			
			<!--按钮-->
			<div class="btn_bar">
				<div class="goods_ck_info">
					<!--您将购买

					<span>1</span>
					件

					<span>44/适合44的脚穿</span>
					颜色-->
				</div>
				<div class="btn_box">
					<input class="btn_buy" type="submit"  value=""/>
					<input class="btn_car" type="button" />
				</div>				
			</div>						
		</div>		
	</div>
</nav>
<!--end Product Details-->

<!--Shopcar dialog-->
<div id="btn_car_cover">
	<div class="dialog_title">
		<div class="dialog_close_btn"></div>
	</div>
	<div class="dialog_content">
		<div class="clearfix">
			<div class="span_auto">
				<img src="./Public/Home/images/buy.jpg" alt="" />
			</div>
			<div class="span_auto">
				<p class="span_auto_title">您选购的商品已经添加到购物车中</p>
				<br />
				<p class="span_auto_content">
					购物车共 有<b></b> 件商品，合计:<span>￥</span><span class="totleMoney">￥</span>					
				</p>
			</div>
			<a href="{{U('FillInfo/index')}}">
			<input type="button" value="立即结算"/>
			</a>
			<a href="{{U('List/index',['cid'=>$_GET['cid']])}}">继续购物>></a>
		</div>
	</div>
</div>
<!--end Shopcar dialog-->

<!--goods_mess-->
<nav id="goods_mess">
	<div class="goods_mess_tab">
		<div class="goods_mess_t">商品详情</div>
		<div class="goods_mess_t">顾客评论</div>
		<div class="goods_mess_t">销量信息</div>
	</div>
	<div class="goods_mess_cont">
		<!--详细信息-->
		<div class="goods_mess_c cont">
			<ul>
				{{$goodsData[0]['content']}}
				<!--<li>
				品	牌：
				<span>后台数据</span>
				</li>-->				
			</ul>
			<!--<div class="pro"></div>-->
		</div>	
		<!--顾客评论-->
		<div class="comment cont">

			<!--<h1>放评论插件</h1>-->
		</div>
		<!--交易历史记录-->
		<div class="history cont">
			<div class="history_tab"><strong>总销量</strong></div>
			<div class="history_body">
				<table border="1" cellspacing="0" cellpadding="0" width="100%">
					<thead>
						<tr>
							<th width="30%">买家</th>
							<th>购买数量</th>
							<th width="30%">购买时间</th>
						</tr>
					</thead>
					<tbody>
						<!--<tr>
							<td>che***</td>
							<td>
								1 
								<span>( 42/适合42的脚穿、相片蓝+白+游戏宝蓝 )</span> 
							</td>
							<td>2016-08-05</td>
						</tr>-->
						
					</tbody>
				</table>
			</div>
			<!--成交数目-->
			<div class="tips">
				截至今日， 累计成交

				<!--<span>4</span>-->
				笔
			</div>
		</div>
	</div>
</nav>	

<!--回到首页-->
<a class="warp" href="{{U('Index/index')}}"><img src="./Public/Home/images/Home.png"/></a>


<!--载入公共模板-->
{{include file="../Common/footer"}}